@extends('layouts.dashboard')

@section('content')
    <div id="app">
        <div class="row" >
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>单数统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" ref="user_echart" id="flot-dashboard-chart2"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        require.config({
            waitSeconds: 0
        });
        require([
            "{{ URL::asset('/static/web/js/vue.js')}}",
            "{{ URL::asset('/static/web/js/axios.min.js')}}"
        ], function (Vue, axios) {
            new Vue({
                el: "#app",
                data: {
                    option: {},
                    myChart: {},
                },
                methods: {
                    info: function () {
                        var that = this;
                        axios.get("{{('orderchart')}}?escort_id=" + {{$escort_id}}).then((res) => {
                            that.myChart.user_echart.setOption(that.userchartsetoption(res.data.data));
                        });
                    },

                    userchartsetoption: function (data) {
                        this.option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    crossStyle: {
                                        color: '#999'
                                    }
                                }
                            },
                            toolbox: {
                                feature: {
                                    dataView: {show: false, readOnly: false},
                                    magicType: {show: true, type: ['line', 'bar']},
                                    restore: {show: false},
                                    saveAsImage: {show: false}
                                }
                            },
                            legend: {
                                data: data.legend
                            },
                            grid: {
                                x: 70,
                                x2: 50,
                                y: 60,
                                y2: 50
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: data.xAxis,
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '单数',
                                    min: 0,
                                    max: data.yAxis.maxnum,
                                    interval: 50,
                                    axisLabel: {
                                        formatter: '{value} 单'
                                    }
                                }
                            ],
                            series: [{
                                name: '单数',
                                type: 'bar',
                                barWidth: '50%',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true, //开启显示
                                            position: 'top', //在上方显示
                                            textStyle: { //数值样式
                                                color: '#666',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                },
                                data: data.series
                            }]

                        };
                        return this.option;
                    },
                    setChart: function (name, myChartname) {
                        this.myChart[myChartname] = echarts.init(name, 'macarons');//初始化echart
                    }
                },
                mounted: function () {
                    const self = this;
                    this.setChart(self.$refs.user_echart, 'user_echart');//用户图表
                    this.info();
                }
            });
        })
    </script>
@endsection



